import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import "./shop.css"

import { actions, getShopList,getAllFlag,getPrice } from "../../store/modules/shop";
class Shop extends Component {
    componentDidMount() {
        let { reqShopList } = this.props.shop
        reqShopList()
    }
    render() {
        let { shopList,allFlag,price, shop: { reqShopDel, reqShopAdd,changeShopListOne,changeAllFlag } } = this.props
        let list = shopList[1]
        return (
            <div className="shop">
                <div className="top">
                    <h3>购物车</h3>
                </div>
                <div className="main">
                    {
                        list ? list.content.map((item,index) => (
                            <div key={item.id} className="shopBox">
                                <div className="input"><input type="checkbox" checked={item.flag} onChange={(e)=>changeShopListOne(e.target.checked,index)} /></div>
                                <div className="img"><img src={item.img} alt="" /></div>
                                <div className="descript">
                                    <p className="goodsname">{item.goodsname}</p>
                                    <p className="price">￥{item.price}</p>
                                    <p className="button">
                                        <button className="sub">-</button>
                                        <span>{item.num}</span>
                                        <button className="add" onClick={() => reqShopAdd(item.goodsid)}>+</button>
                                    </p>
                                    <p className="del"><button onClick={() => reqShopDel(item.id)}>删除</button></p>
                                </div>
                            </div>
                        )) : null
                    }
                </div>
                <div className="buttom">
                    <div className="input"><input type="checkbox" checked={allFlag} onChange={()=>changeAllFlag(!allFlag)} />全选</div>
                    <div className="zhong">
                        <p>
                            <span className="sp1">合计</span>
                            <span className="sp2">￥{price?price.toFixed(2):"0.00"}</span>
                        </p>
                        <p>
                            <span className="sp3">以免运费</span>
                            <span className="sp4">已优惠￥200元</span>
                        </p>
                    </div>
                    <div className="button">
                        <button>结算</button>
                    </div>
                </div>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    shopList: getShopList(state),
    allFlag: getAllFlag(state),
    price:getPrice(state),
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ shop: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Shop);